 /*
 * @description: 添加财控岗位弹窗
 * @Author: along
 * @Date: 2021-07-09
 * @Last Modified by: along
 * @Last Modified time: 2021-07-09
 */
<template>
    <el-dialog
        title="添加财控岗位"
        :visible.sync="dialogVisible"
        width="640px"
        :close-on-click-modal="true"
        class="__createPlatformDialog"
    >
        <div class="__wrap">
            <p class="__name">岗位名称</p>
            <el-input
                v-model="keyword"
                placeholder="请输入岗位名称"
                size="small"
                @change="getTableData(1)"
                @keyup.native.enter="getTableData(1)"
                :style="{width: '406px'}"
            />
        </div>

        <div class="__box">
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
                ref="platformDialog"
                @select="fnSelect"
                @select-all="fnSelectAllTop"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="40"
                    fixed="left"
                />
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="position_name"
                    label="岗位名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        <p class="__text">
                            {{ scope.row.position_name }}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="department_name"
                    label="所属部门"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <!-- <el-table-column
                    prop="username"
                    label="用户名"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <template v-if="!!scope.row.user_list.length">
                            <div class="__list">
                                <div
                                    v-for="(row,index) in scope.row.user_list"
                                    :key="index"
                                    class="__list_items"
                                >
                                    {{ row.username }}
                                </div>
                            </div>
                        </template>
                        <p v-else>--</p>
                    </template>
                </el-table-column> -->
                <el-table-column
                    prop="true_name"
                    label="姓名"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        <template v-if="!!scope.row.user_list.length">
                            <div class="__list">
                                <div
                                    v-for="(row,index) in scope.row.user_list"
                                    :key="index"
                                    class="__list_items"
                                >
                                    {{ row.true_name }}
                                </div>
                            </div>
                        </template>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="130"
                >
                    <template slot-scope="scope">
                        <template v-if="!!scope.row.user_list.length">
                            <div class="__list">
                                <div
                                    v-for="(row,index) in scope.row.user_list"
                                    :key="index"
                                    class="__list_items"
                                >
                                    {{ row.phone }}
                                </div>
                            </div>
                        </template>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper clearfix">
                <el-checkbox
                    v-model="checkedAll"
                    :indeterminate="checkIndeterminate"
                    @change="fnChangeChecked"
                >全选</el-checkbox>
                <!-- <el-pagination
                    :style="{opacity: 0}"
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                /> -->
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="dialog-footer">
            <el-button
                type="default"
                size="medium"
                @click="dialogVisible = false"
                :style="{width: '120px', marginRight: '32px'}"
            >
                取 消
            </el-button>
            <el-button
                size="medium"
                type="primary"
                :style="{width: '120px'}"
                @click="handleConfirm()"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            keyword: '',//岗位搜索
            checkIndeterminate: false,
            multipleSelection: [],
            checkedAll: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [
                // {
                //     position_name: 'web前端开发',
                //     department_name: '研发岗',
                //     position_no: 'pt_ffs22222',
                //     department_no: 'dp_fffsss22',
                //     user_list: [
                //         {
                //             username: '德玛西亚',
                //             true_name: '嘉文四岁',
                //             phone: '17521192130'
                //         },
                //         {
                //             username: '德玛西亚',
                //             true_name: '嘉文四岁',
                //             phone: '17521192130'
                //         },
                //         {
                //             username: '德玛西亚',
                //             true_name: '嘉文四岁',
                //             phone: '17521192130'
                //         }
                //     ]
                // }
            ],
            dialogVisible: false
        };
    },
    methods: {
        /**
         * @description 显示弹窗
         */
        showDialog () {
            this.getTableData();
            this.dialogVisible = true;
        },

        /**
         * @description 获取数据列表
         */
        getTableData (page) {
            this.$post('/student/finance_control_phaadmin_position%5Cget_all_list_for_select', {
                // page_id: page || this.page.now_page
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data;
                    // this.page.now_page = resp.data.page.now_page;
                    // this.page.total_count = resp.data.page.total_count;
                    // this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 确定选择数据
         */
        handleConfirm () {
            const nos = this.multipleSelection.reduce((cur,next) => {
                cur.push(next.position_no);
                return cur;
            }, []);

            this.$emit('confirm', nos);
            this.dialogVisible = false;
        },

        /**
         * @description 全选逻辑操作
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                console.log('platformDialog', this.$refs.platformDialog);
                this.$refs.platformDialog.toggleAllSelection();
            } else {
                this.$refs.platformDialog.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less">
.__createPlatformDialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    .__text {
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 500;
        text-align: left;
    }
    .__wrap {
        display: flex;
        align-items: center;
        margin-left: 32px;
        margin-bottom: 24px;
        .__name {
            margin-right: 12px;
        }
    }
    .__list {
        display: flex;
        flex-direction: column;
        .__list_items {
            // color: rgba(51, 51, 51, 1);
            font-size: 14px;
            margin-top: 10px;
        }
        .__list_items:first-child {
            margin-top: 0px;
        }
    }
    .__button {
        width: 512px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px rgba(32, 160, 255, 1) dashed;
        border-radius: 4px;
        margin: 0 64px 24px 64px;
        color: rgba(32, 160, 255, 1);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        .el-icon-hand-iconjia {
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            margin-right: 10px;
        }
    }
    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 76px;
        box-sizing: border-box;
        border-top: none;
    }
    .__box {
        max-height: 350px;
        overflow: hidden;
        overflow-y: auto;
        margin: 0 32px;
        background: rgba(251, 251, 251, 1);
        &::-webkit-scrollbar {
            width: 3px;
        }
    }
    .el-dialog__body {
        padding: 24px 0 0 0;
    }

    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid #EBEEF5;
        border-top: none;
        padding-left: 12px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }

    .el-table__body-wrapper {
        height: auto !important;
        max-height: 500px;
    }
    .el-table th, .el-table tr {
        background-color: rgba(251, 251, 251, 1);
    }
    .el-table th {
        background-color: rgba(242, 242, 242, 1) !important;
    }
    .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
        border-right: none
    }
    .el-table td, .el-table th {
        padding: 16px 0 !important;
    }
}
</style>